<template>
<div class="layerRtb layerRtb-threecolumn layerRtb-right">
    <three-title :title="{name:'指定出库'}" :close="false">
        <!-- <span tag="i" class="rig_close fr" @click="$parent.$parent.clickFiveShow()"></span> -->
    </three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div class="analyItem">
            <p class="analyItemTit tx-center">指定出库</p>
            <div class="analyItemCon">
                <p class="col-md-5">
                    <span class="cLightGray pr8">点位名称</span>
                    <el-input v-model="pointName" placeholder="请输入点位名称" class="width120" v-if="this.twoToThreeInfo.camera === null"></el-input>
                    <span v-else>{{this.twoToThreeInfo.name}}</span>
                </p>
                <p class="col-md-5">
                    <span class="cLightGray pr8">监控点</span>
                    <el-select v-model="value" placeholder="请选择"  v-if="this.twoToThreeInfo.camera === null" class="ml10" @change="getSauxiliaryInfo(value)">
                        <el-option
                            v-for="item in caremaNameList"
                            :key="item.camera"
                            :label="item.camera_name"
                            :value="item.camera">
                        </el-option>
                    </el-select>
                    <span v-else>{{this.twoToThreeInfo.camera_name}}</span>
                </p>
                <p class="col-md-5 mt10">
                    <span class="cLightGray pr8">开始时间</span>
                    <el-input  v-model="begin_date" placeholder="请输入开始时间" class="width120" type="number" v-if="this.twoToThreeInfo.camera === null"></el-input>
                    <span v-if="this.twoToThreeInfo.camera !== null">{{this.liaryInfoClone.length > 0 ? this.liaryInfoClone[0].begin_date : ''}} 点</span>
                </p>
                    <p class="col-md-5 mt10">
                    <span class="cLightGray pr8">结束时间</span>
                    <el-input v-model="end_data" placeholder="请输入结束时间" class="width120" type="number"  v-if="this.twoToThreeInfo.camera === null"></el-input>
                    <span v-if="this.twoToThreeInfo.camera !== null">{{this.liaryInfoClone.length > 0 ? this.liaryInfoClone[0].end_data : ''}} 点</span>
                </p>
                <p class="col-md-5 mt10">
                    <span class="cLightGray pr8">拍摄间隔</span>
                    <el-input v-model="interval" placeholder="请输入时间间隔" class="width120" type="number"  v-if="this.twoToThreeInfo.camera === null"></el-input>
                    <span v-if="this.twoToThreeInfo.camera !== null">{{this.liaryInfoClone.length > 0 ? this.liaryInfoClone[0].interval : ''}} 点</span>
                </p>
                <input type="button" class="uiBtn-small uiBtn-blue fr" @click="submit()" value="保存" v-if="buttonIsShow && this.twoToThreeInfo.camera === null"/>
            </div>
        </div>
    </div>
    <!-- <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <div class="tx-center">
                    <input type="button" class="uiBtn-normal uiBtn-blue" value="确定" @click="submitButton()" v-if="buttonIsShow">
                </div>
            </div>
        </div>
    </div> -->
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { getCamerasListByRegion, getSauxiliaryInfo } from '../../../../project/dynamicProject/Resources/Api/scene'
import { upCameraStateForPro } from '../../Resources/Api/index'
export default {
    // props: ['type', 'role'],
    // props: ['nowPoints'],
    data () {
        return {
            // upCameraState
            pointName: '',
            pointsList: [], // 点位信息
            caremaNameList: [], // 监控设备数据
            value: '', // 监控点数组
            liaryInfoClone: [], // 监控时间
            buttonIsShow: false,
            searchText: '', // 搜索条件
            begin_date: '', // 开始时间
            end_data: '', // 结束时间
            interval: '', // 时间间隔
            id: '' // 时间id
        }
    },
    created () {
        // this.getSauxiliaryInfo()
        this.getCamerasListByRegion()
        this.buttonType()
        // if (Number(this.twoToThreeInfo.point_state) === 0 && Number(this.twoToThreeInfo.camera_state) === 1) {
        //     this.selectPoint()
        // }
        if (this.twoToThreeInfo.camera !== null) {
            this.getSauxiliaryInfo(this.twoToThreeInfo.camera)
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'twoToThreeInfo', 'userInfo'])
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 按钮显示与隐藏
        buttonType () {
            if (this.userInfo.as_diquId === 39) {
                if (this.twoToThreeInfo.status === this.type) {
                    this.buttonIsShow = true
                } else {
                    this.buttonIsShow = false
                }
            } else {
                const userLevel = this.userInfo.as_level
                if (userLevel.length > 0) {
                    userLevel.forEach(ele => {
                        if (Number(ele) === 47) {
                            if (this.twoToThreeInfo.status === this.type) {
                                this.buttonIsShow = true
                            } else {
                                this.buttonIsShow = false
                            }
                        }
                    })
                } else {
                    this.buttonIsShow = false
                }
            }
        },
        // 按项目查询点位
        // getPointByPro () {
        //     let params = {
        //         order_no: this.leftInfo.order_no
        //     }
        //     getPointByPro(params).then((result) => {
        //         if (result.data.StatusCode === 0) {
        //             this.pointsList = result.data.Body.orderList
        //             this.pointsList.forEach((element, index) => {
        //                 this.caremaName.push(element.name)
        //                 this.getSauxiliaryInfo(element.camera, index)
        //             })
        //         }
        //     }).catch((err) => {
        //         console.log(`按项目查询点位接口错误,错误内容${err}`)
        //     })
        // },
        // 获取开始时间
        getSauxiliaryInfo (camera) {
            let params = {
                camera: camera
            }
            getSauxiliaryInfo(params).then((result) => {
                if (result.data.StatusCode === 0) {
                    this.liaryInfoClone = result.data.Body.orderList
                }
            }).catch((err) => {
                console.log(`按监控点查询监控时间错误,错误内容${err}`)
            })
        },
        // 获取监控设备
        getCamerasListByRegion () {
            let params = {
                region_id: this.leftInfo.region_id,
                area_id: 0,
                searchText: this.searchText
            }
            getCamerasListByRegion(params).then((result) => {
                if (result.data.StatusCode === 0) {
                    let array = result.data.Body.orderList
                    array.forEach(element => {
                        if (element.camera_state !== 1) {
                            this.caremaNameList.push(element)
                        }
                    })
                }
            }).catch((err) => {
                console.log(`按项目查询点位接口错误,错误内容${err}`)
            })
        },
        // 保存点位信息 保存监控信息
        submit () {
            if (this.pointName === null || this.pointName === undefined) {
                this.open('警告', '请填写点位名称之后再提交！！！')
                return
            }
            if (this.value === null || this.value === undefined) {
                this.open('警告', '请选择监控点之后再提交！！！')
                return
            }
            if (this.liaryInfoClone !== undefined && this.liaryInfoClone !== null && this.liaryInfoClone.length > 0) {
                this.id = this.liaryInfoClone[0].id
            }
            let params = {
                camera_state: 1, // 监控状态
                name: this.pointName, // 点位名称
                camera: this.value, // 监控点编号
                id: this.id, // 时间id
                point_id: this.twoToThreeInfo.id, // 点位id
                region_id: this.leftInfo.region_id, // 地区id
                order_no: this.leftInfo.order_no, // 单号
                remark: this.userInfo.as_jueseName + this.userInfo.as_fullName + '操作出库', // 备注
                opereater: this.userInfo.as_fullName, // 操作人
                begin_date: this.begin_date, // 开始时间
                end_data: this.end_data, // 结束时间
                interval: this.interval // 时间间隔
            }
            upCameraStateForPro(params).then((result) => {
                if (Number(result.data.StatusCode) === 0) {
                    // this.setTwoToThreeInfo.push('name', this.pointName)
                    // this.setTwoToThreeInfo.push('camera_name', this.value)
                    // let Cameraparams = {
                    //     camera: this.value,
                    //     begin_date: this.begin_date,
                    //     end_data: this.end_data,
                    //     interval: this.interval
                    // }
                    // upCameraInfo(Cameraparams).then((result) => {
                    //     if (result.data.StatusCode === 0) {
                    //         this.pointName = this.twoToThreeInfo.name
                    //         this.value = []
                    //         this.getPointByPro()
                    //         this.getCamerasListByRegion()
                    //     }
                    // }).catch((err) => {
                    //     console.log(`保存监控信息失败，${err}`)
                    // })
                    this.$router.push(this.$route.matched[1].path)
                    this.setUpDatePlate()
                    this.getSauxiliaryInfo(this.value)
                }
            }).catch((err) => {
                console.log(`分配摄像头失败，${err}`)
            })
        },
        // 弹框提示
        open (title, msg) {
            this.$alert(msg, title, {
                confirmButtonText: '确定',
                callback: action => {
                    this.$message({
                        type: 'info',
                        message: msg
                    })
                }
            })
        }
        // 路由跳转路径拼接
        // routerPath (path) {
        //     return this.$route.matched[1].path + '/' + path
        // },
        // // 直接进行路由跳转路径
        // routerPush (path) {
        //     this.$router.push(this.$route.matched[1].path + '/' + path)
        // }
    },
    watch: {
        // leftInfo () {
        //     this.load()
        // }
    }
}
</script>

<style>
   .width120.el-input {
       width: 120px;
       display: inline-block;
   }
</style>
